<template>
  <div class="home2">
    <canvas id="myCanvas"></canvas>
  </div>

</template>
  
  <script>
export default {
  mounted() {
    const canvas = document.getElementById('myCanvas')
    const ctx = canvas.getContext('2d')
    let home = document.querySelector('.home')
    const width = home.clientWidth
    const height = home.clientHeight

    canvas.width = width
    canvas.height = height

    const particles = []
    const connections = []
    const particleCount = 1000 // 粒子数量
    const particleSpeed = 1 // 粒子移动速度
    const particleSize = 2 // 粒子大小
    const maxDistance = 100 // 粒子连线的最大距离
    const lightningColor = '#fff' // 粒子连线的颜色

    // 创建粒子类
    class Particle {
      constructor() {
        this.x = Math.random() * width
        this.y = Math.random() * height
        this.color = '#fff'
        this.angle = Math.random() * 360
        this.speed = Math.random() * particleSpeed
        this.opacity = Math.random() * 0.5 + 0.5
      }

      update() {
        this.x += Math.cos(this.angle) * this.speed
        this.y += Math.sin(this.angle) * this.speed

        // 如果粒子超出画布范围，则重新随机设置位置
        if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
          this.x = Math.random() * width
          this.y = Math.random() * height
        }
      }

      draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2)
        ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`
        ctx.fill()
      }
    }

    // 创建粒子数组
    function createParticles() {
      for (let i = 0; i < particleCount; i++) {
        particles.push(new Particle())
      }
    }

    // 绘制粒子之间的连线
    function drawConnections() {
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x
          const dy = particles[i].y - particles[j].y
          const distance = Math.sqrt(dx * dx + dy * dy)

          if (distance < maxDistance) {
            ctx.beginPath()
            ctx.moveTo(particles[i].x, particles[i].y)
            ctx.lineTo(particles[j].x, particles[j].y)
            ctx.strokeStyle = lightningColor
            ctx.lineWidth = 0.2 * (1 - distance / maxDistance)
            ctx.stroke()
            ctx.closePath()
          }
        }
      }
    }

    // 动画循环
    function animate() {
      ctx.clearRect(0, 0, width, height)

      for (const particle of particles) {
        particle.update()
        particle.draw()
      }

      drawConnections()

      requestAnimationFrame(animate)
    }

    // 监听鼠标移动事件，根据鼠标位置更新粒子运动状态
    document.addEventListener('mousemove', (e) => {
      const mouseX = e.clientX
      const mouseY = e.clientY

      for (const particle of particles) {
        const dx = mouseX - particle.x - 200
        const dy = mouseY - particle.y - 60
        const distance = Math.sqrt(dx * dx + dy * dy)

        if (distance < maxDistance) {
          particle.angle = Math.atan2(dy, dx)
          particle.speed = 5
        } else {
          particle.speed = Math.random() * particleSpeed
        }
      }
    })

    // 初始化粒子数组并启动动画
    createParticles()
    animate()
  },
}
</script>
  
  <style lang="scss" scoped>
.home2 {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>